<template>
	<div class="mt-30 item-card" v-if="graceList.length">
		<div class="swiper-container swiper2">
			<div class="swiper-wrapper">
				<div class="swiper-slide grace-image" v-for="(item, index) in graceList" :key="index" @click="enterBannerDetail(item)">
					<img :src="item.colCoverImg" class="image_hover" />
					<span class="name">{{ item.colTitle }}</span>
				</div>
			</div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
import '@/assets/css/swiper.min.css'
import Swiper from '@/assets/js/swiper.min.js'
export default {
	props: {
		graceList: {
			type: Array,
			default: () => {
				return []
			}
		},
	},
	data() {
		return {
			
		}
	},
	watch: {
		graceList(nv) {
			if (Array.isArray(nv)) {
				this.initGraceSwiper()
			}
		}
	},
	mounted() {
		// this.getArticleTypeListByCode()
	},
	methods: {
		enterBannerDetail(item) {
			console.log('enterBannerDetail', item)
			this.$emit('click', item)
		},
		initGraceSwiper() {
			let swiper2 = new Swiper('.swiper2', {
				loop: true,
				autoplay: true,
				loopAdditionalSlides: 7,
				loopedSlides: 3,
				spaceBetween: 40,
				allowTouchMove: false,
				slidesPerView: 'auto',
				watchSlidesProgress: true,
				observer: true,
				observeParents: true,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			})
			window.onresize = function () {
				// swiper2.update()
			}
		},
		getArticleTypeListByCode() {
			this.$store
				.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.teacherspeak)
				.then((articleType) => {
					console.log('getArticleTypeListByCode', articleType)
					this.$api.articletype
						.getArticleLlist({
							articleType: articleType.colId,
							pageSize: 20,
							pageNum: 1,
						})
						.then((res) => {
							const data = res.data
							if (data.code == 200) {
								this.graceList = data.rows
								this.initGraceSwiper()
							}
						})
				})
				.catch((error) => {
					console.log(error)
				})
		},
	},
}
</script>

<style scope lang="scss">
.swiper2 {
	width: 100%;
	height: auto;
}

.item-card {
	position: relative;
	background-color: rgba(0, 0, 128, 0.05);
	width: 100%;
	padding: 45px 80px 32px 80px;
}

.grace-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100px;
	/* background: blue; */

	.name {
		height: 27px;
		color: rgba(51, 51, 51, 1);
		font-size: 20px;
		white-space: nowrap;
		line-height: 27px;
		margin-top: 16px;
	}
}

.image_hover {
	height: 100px;
	transition: transform 0.3s; /* 添加过渡效果 */
}

.swiper-slide:hover .image_hover {
	cursor: pointer;
	transform: scale(1.1); /* 缩放图片 */
	/* 可以添加其他效果，比如边框、阴影等 */
}

.swiper-button-prev {
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_left.png) no-repeat;
	background-size: 100%;
}

.swiper-button-next {
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_right.png) no-repeat;
	background-size: 100%;
}
</style>
